<template>
  <Popup
    v-model:show="showPopup"
    :style="{ background: 'transparent', overflow: 'hidden' }"
  >
    <div class="phone-box">
      <img src="@/assets/image/phone-heard.png" class="phone-box-heard" />
      <div class="phone-body-box">
        <slot></slot>
      </div>
      <img src="@/assets/image/phone-button.png" class="phone-box-button" />
    </div>
  </Popup>
</template>

<script lang="ts" setup>
import { Popup } from "vant";
const showPopup = defineModel<boolean>("show-popup");
</script>

<style lang="scss" scoped>
.phone-box {
  position: relative;
  width: 336px;
  height: 606px;
  background-image: url(@/assets/image/phone-background.png);
  background-size: 100% 100%;
  background-repeat: repeat;
  .phone-body-box {
    position: absolute;
    top: 28px;
    left: 15px;
    width: 306px;
    height: 524px;
    border-radius: 10px;
    background-color: #ffffff;
  }
  .phone-box-heard {
    position: absolute;
    top: 7px;
    width: 87px;
    height: 16px;
    left: 124px;
  }
  .phone-box-button {
    width: 47.5px;
    height: 47.5px;
    position: absolute;
    bottom: 5px;
    left: 138.51px;
  }
}
</style>
